<template>
<view id="asas" >
    <view  class="incomeP" >  
      <!-- 收益 -->
            <view  class="totle">
                <view class="totle-title" >总收益统计</view>
                <view class="totle-content">
                    <view class="totle-content-item">
                    <view>{{totalEarnings.totalEarnings}}.00</view>
                    <view>累计收益</view>
                    </view>
                    <view class="totle-content-item">
                    <view>{{totalEarnings.realEarnings}}.00</view>
                    <view>实际收益</view>
                    </view>
                    <view class="totle-content-item">
                    <view>{{totalEarnings.payPowerBankAmount}}.00</view>
                    <view>买入宝总扣款</view>
                    </view>
                </view>
            </view>

                <view class="buying"  @click="gommbM" >
                        
                        <view class="buying-item">
                        <image class="image-pur" src="../../style/image/stati/A28.png" alt="">
                        <view class="buy-title" >宝买卖</view>
                        </view>

                        <view class="buying-item"   >
                        <view class="prolify"  >总收益<span :style="{ margin:'0rem 0.3rem' }" >{{proceedsPowerBankAmount}}.00</span></view>
                         <image  class="image-arrow" src="../../style/image/stati/A27.png" alt="">
                        </view>
                </view>

                     <view class="prolifying"   @click="goFR" >
                        
                        <view  class="buying-item">
                        <image class="image-pur" src="../../style/image/stati/A35.png" alt="">
                        <view class="buy-title" >分润</view>
                        </view>

                        <view class="buying-item">
                        <view class="prolify"  >总收益  <span :style="{ margin:'0rem 0.3rem' }" >{{profitAmount}}.00</span></view>
                         <image  class="image-arrow" src="../../style/image/stati/A27.png" alt="">
                        </view>
                </view>

                <view class="productP" >

                <view class="searchPP">
                <view class="searchP">
                <view class="search" :style="{ width:'100%' }" >
                    <u-search placeholder="请输入商户姓名或电话"  
                    shape="round"
                    v-model="keyword"
                    :show-action='false'
                    ></u-search>
                </view>

                <view @click="selectTimeM" class="celendar">
                <image :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/A33.png" alt="">
                <view>{{selectTime}}</view>
                </view>

                </view>
                </view>

                <view  class="menuDouble" style="display: flex;" >
                <!-- <u-dropdown ref="uDropdown"  @change="change">
			<u-dropdown-item v-model="value1" title="全部商户"  active-color='#02af74' :options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="全部设备" active-color='#02af74'  :options="options2"></u-dropdown-item>
		         </u-dropdown> -->

            
	
      <!-- 第一种
			<u-dropdown ref="uDropdown" >
			<u-dropdown-item  v-model="value1"  :title="value1" :options="options1" @change="change"></u-dropdown-item>
			<u-dropdown-item   v-model="value2" :title="value2"  :options="options2" @change="changeOption2" ></u-dropdown-item>
		 </u-dropdown> -->

       <!-- <u-dropdown class="dropdowns" ref="uDropdown">
		
		</u-dropdown> -->

     <u-dropdown class="dropdownss" ref="uDropdown">

     	<u-dropdown-item :title="value1" >
				<view class="slot-content" style="background-color: #FFFFFF;">
					<scroll-view scroll-y="true"   @click="closeDropdown"  style="height: 200rpx;">
						<view  v-for="(item,index) in options1"  @click="change(item)" class="u-text-center u-content-color u-m-t-20 u-m-b-20">{{item.label}}</view>
					</scroll-view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item :title="value2" >
				<view class="slot-content" style="background-color: #FFFFFF;">
					<scroll-view scroll-y="true" style="height: 200rpx;"  @click="closeDropdown" >
						<view   v-for="(item,index) in options2"  @click="changeOption2(item)" class="u-text-center u-content-color u-m-t-20 u-m-b-20">{{item.label}}</view>
					</scroll-view>
				</view>
			</u-dropdown-item>
		</u-dropdown>

            
                </view>


              
               <!-- <view class="totle-contents">
                    <view class="totle-contents-item">
                    <view>¥1987.00</view>
                    <view>累计收益</view>
                    </view>
                    <view class="totle-contents-item">
                    <view>¥1987.00</view>
                    <view>实际收益</view>
                    </view>
                    <view class="totle-contents-item">
                    <view>¥187.00</view>
                    <view>买入宝总扣款</view>
                    </view>
                </view> -->

                <view class="allDataC" v-for="(item,index) in allData " :key="index" >

                 <view   class="allDataC-item">

                    <view class="allDataC-item-title">
                   <view :style="{padding:'0.5rem 0rem',display:'flex',justifyContent: 'space-between'  }" class="allDataC-item-view" >
                    <view style="font-weight: 400;" >订单号：<span style="font-weight:300;">{{item.orderSn}}</span></view>
                   </view>
                    </view>

                    <view class="allDataC-item-content">
                        <view class="contentP" :style="{display:'flex',justifyContent: 'space-between'  }" >

                            <view class="content-info">
                                 <view  class="content-info-item">
                                 <view>商户名称：<span>{{item.shopName}}</span></view>
                                
                                </view>
								<view class="content-info-item">
								<view>租借地址：<span  style="font-size: 0.7rem;"  >{{item.address}}</span></view>
								</view>
                                <view class="content-info-item">
                                <view>租借时长：<span style="font-size: 0.7rem;" >{{item.loanTime}}</span></view>
                                </view>
                                <view class="content-info-item">
                                <view>租借时间：<span  style="font-size: 0.7rem;"  >{{item.rentDate}}</span></view>
                                </view>
								<view class="content-info-item">
								<view>充电宝SN码：<span  style="font-size: 0.7rem;"  >{{item.bankSn}}</span></view>
								</view>
								<view class="content-info-item">
								<view>设备备注：<span  style="font-size: 0.7rem;"  >{{item.remarks}}</span></view>
								</view>
								<view class="content-info-item">
								<view>所在位置备注：<span  style="font-size: 0.7rem;"  >{{item.location}}</span></view>
								</view>
                            </view>

                            <view class="proliify">
								<view class="" style="color: #a6a6a6;">
									{{item.totalAmount}}元
								</view>
                              <view class="">
                              	+{{item.money}}元
                              </view>
                            </view>
                        </view>
                    </view>    
                 </view>          
                </view>

                <u-empty v-if="allData.length==0" text="暂无数据" mode="data"></u-empty>

                </view>


     

    </view>

        <u-popup :safe-area-inset-bottom='true' v-model="popupShow" mode="bottom">

           
              <view>
               <view style="text-align: center;margin: 1rem 0rem 0rem 0rem;" >请选择筛选类型:</view>

               <view class="classesifyP">
                
      <view class="classesify">
        <view :class="selectIfy==1?'classesify-puc':'classesify-pucs' "  @click="pucM" >按月</view>
        <!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->

        <view class="classesify-buss"  @click="busM" v-if="selectIfy == 2">按日</view>
         <view  class="classesify-bus"  @click="busM" v-else>按日</view>
      </view>
    </view>
            </view>
	    	</u-popup>

       <u-picker v-model="pickerShow"  @confirm="pickerConfirm"  mode="time"></u-picker>

       <u-select v-model="selectShow"  :default-value=[10,10] z-index='9999' mode="mutil-column" :list="list" @confirm="selectConfirm"></u-select>
    
     </view>     
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { AppModule } from "../../store/modules/app";

import {
  earningsStatistics,
  shopTerminalProfitSH,
  findShopBox,
  findTerminalBox,
} from "../../utils/uniApi";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public mode = "date";
  public keyword = ""; //请输入商户姓名或电话

  public allData = ["1", "2", "123", "123"];

  public value1 = "全部商户";

  public value2 = "全部设备";

  public totalEarnings = {
    payPowerBankAmount: 60,
    realEarnings: 0,
    totalEarnings: 10,
  };

  public proceedsPowerBankAmount = "";
  public profitAmount = "";
  public pageData = 1;
  public shopId = ""; //商铺id 查询商户ID
  public sn = "";
  public options1: any = [
    // {
    //   label: "暂无数据",
    //   value: 1,
    // },
  ];
  public options2: any = [     //设备下拉框
    // {
    //   label: "暂无数据",
    //   value: 1,
    // },
  ];

  // 日期选择
  public selectTime: any = "请选择日期";
  public selectIfy: any = 0;
  public popupShow: boolean = false;
  public pickerShow = false;
  public selectShow = false;
  public dateType: string = "month"; //month 按月查询,day 按天查询

  public show = false;
  public dateTime = ""; // 日期

  public list = [
    [
      {
        value: "1",
        label: "2010",
      },
      {
        value: "2",
        label: "2011",
      },
      {
        value: "3",
        label: "2012",
      },
      {
        value: "4",
        label: "2013",
      },
      {
        value: "5",
        label: "2014",
      },
      {
        value: "6",
        label: "2015",
      },
      {
        value: "7",
        label: "2016",
      },
      {
        value: "8",
        label: "2017",
      },
      {
        value: "9",
        label: "2018",
      },
      {
        value: "10",
        label: "2019",
      },
      {
        value: "11",
        label: "2020",
      },
      {
        value: "12",
        label: "2021",
      },
    ],
    [
      {
        value: "13",
        label: "1",
      },
      {
        value: "14",
        label: "2",
      },
      {
        value: "15",
        label: "3",
      },
      {
        value: "16",
        label: "4",
      },
      {
        value: "17",
        label: "5",
      },
      {
        value: "18",
        label: "6",
      },
      {
        value: "19",
        label: "7",
      },
      {
        value: "20",
        label: "8",
      },
      {
        value: "21",
        label: "9",
      },
      {
        value: "22",
        label: "10",
      },
      {
        value: "23",
        label: "11",
      },
      {
        value: "24",
        label: "12",
      },
    ],
  ];

  created() {
    console.log("月份列表值", this.list[0][0].label);

    //    alert(1)
    uni.setStorage({
      key: "staticCurrent",
      data: 1,
      success: function () {},
    });

    console.log("收益", AppModule.moduleBar);

    let datas = new Date();
    function formatDate(datas: any) {
      var myyear = datas.getFullYear();
      var mymonth = datas.getMonth() + 1;
      var myweekday = datas.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    }

    console.log(formatDate(datas));

    this.selectTime =
      formatDate(datas).split("-")[0] + "-" + formatDate(datas).split("-")[1];

    // if(){
    //   }
  }
  onShow() {
    alert("收益显示onShow");
  }
  onHide() {
    alert("收益页面关闭");
  }

  mounted() {
    this.findShopBoxM();
    this.findTerminalBox();

    this.accordingM();

    uni.showLoading({
      title: "加载中",
    });
    let params = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
    };
    earningsStatistics(params).then((res: any) => {
      console.log("收益res", res);
      this.totalEarnings = res.data.data.totalEarnings;
      this.proceedsPowerBankAmount = res.data.data.proceedsPowerBankAmount;
      this.profitAmount = res.data.data.profitAmount;
      uni.hideLoading();
    });
  }

  scroll(){
  
   console.log('123')
  }

  change(data: any) {

      console.log(data, "2222");
      this.allData = [];
      this.value1 = data.label;
      this.shopId = data.id;
      this.accordingM();

    // this.options1.filter((item: any, indexd: any) => {
    //   console.log(item.label, "item.shopName", index, indexd);
    //   if (item.value == index) {
    //     console.log(item.label, "item.shopName");
    //     this.value1 = item.label;
    //     this.shopId = item.id;
    //     console.log("this.shopIdthis.shopId", this.shopId);
    //     this.accordingM();
    //   }
    // });
  }

  changeOption2(data: any) {

   console.log('changeOption2')

      this.allData = [];
    console.log(data, "2222");
      this.value2 = data.label;
      this.sn = data.label;
      this.accordingM();
    
    // this.options2.filter((item: any, indexd: any) => {
    //   console.log(item.label, "item.shopName", index, indexd);
    //   if (item.value == index) {
    //     console.log(item.label, "item.shopName");
    //     this.value2 = item.label;

    //     this.sn = item.label;
    //     console.log(this.sn, " this.sn this.sn this.sn");
    //     this.accordingM();
    //   }
    // });
  }

  closeDropdown() {

  // console.log('guanbi')

			(this.$refs.uDropdown as any).close();

      console.log('guanbi')

			}

  findShopBoxM() {
    uni.showLoading({
      title: "加载中",
    });
    let param = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
    };
    findShopBox(param).then((res: any) => {
      console.log(res, "ress商户下拉菜单");
      // this.options1=res.data.data

      res.data.data.filter((item: any, index: any) => {
        console.log(item.shopName, index);
        let obj: object = {
          label: item.shopName, //商户名
          value: index, //索引
          id: item.id, //商户id
        };
        this.options1.push(obj);
        uni.hideLoading();
      });
    });
  }

  findTerminalBox() {
    uni.showLoading({
      title: "加载中",
    });
    let param = {
      shopId: "",
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
    };
    findTerminalBox(param).then((res: any) => {
      console.log(res, "ress设备下拉菜单");
      res.data.data.filter((item: any, index: any) => {
        // console.log(item.shopName,index)
        let obj: object = {
          label: item.sn, //设备名
          value: index, //索引
          id: item.id, //设备id
        };
        this.options2.push(obj);
        uni.hideLoading();
      });
    });
  }

  accordingM() {
    uni.showLoading({
      title: "加载中",
    });
    let param = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
      dateType: this.dateType,
      dateTime: this.selectTime == "请选择时间" ? "" : this.selectTime, //查询时间(时间不传默认查询当天)
      shopId: this.shopId, //查询商户ID
      sn: this.sn, //查询设备
      keyWork: this.keyword, //查询商户姓名/电话
      pageNo: this.pageData,
      pageSize: 50,
    };
    shopTerminalProfitSH(param).then((res: any) => {
      console.log("商户列表", res);
      this.allData = res.data.data;
      uni.hideLoading();
    });
  }
  
  gommbM() {
    console.log("去mmb");
    uni.navigateTo({
      url: "../item/buyNull/def",
    });
  }

  goFR() {
    uni.navigateTo({
      url: "../item/shareBenefit/index",
    });
  }

  selectTimeM() {
    uni.pageScrollTo({
      selector: "#asas",
      duration: 30, //过渡时间必须为0，否则运行到手机会报错
      scrollTop: -10, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top - data.top）
    });

    this.popupShow = !this.show;
  }

  pickerConfirm(data: any) {
    console.log("按日起", data);
    this.selectTime = data.year + "-" + data.month + "-" + data.day;

    this.dateType = "day";
    this.selectTime = data.year + "-" + data.month + "-" + data.day;

    this.accordingM();
  }

  selectConfirm(data: any) {
    console.log(data);

    let str = (data[0] as any).label + "-" + (data[1] as any).label;

    this.dateType = "month";
    this.selectTime = str;

    this.accordingM();
  }

  busM() {
    //方法中获取this
    this.selectIfy = 2;

    this.popupShow = false;
    this.pickerShow = true;

    setTimeout(() => {
      this.selectIfy = 0;
    }, 1000);
  }

  pucM() {
    console.log(12312312);
    this.selectIfy = 1;

    this.popupShow = false;
    this.selectShow = true;

    setTimeout(() => {
      this.selectIfy = 0;
    }, 1000);
  }

  search() {
    uni.showLoading({
      title: "加载中",
    });

    this.accordingM();
  }

  @Watch("keyword")
  userInputM(a: any, b: any) {}
}
</script>



<style  lang="scss"  scoped>





.incomeP {
  /* padding: 1rem; */
  height: 100%;
  background-color: #f3f5f7;
}
.totle-title {
  padding: 0.8rem;
  text-align: center;
  font-size: 1rem;
  color: white;
}
.totle {
  background: #02b074;
  box-shadow: 0rem 0rem 1rem 0rem rgba(2, 176, 116, 0.3);
  border-radius: 0.8rem;
  margin: 1rem;
}
.totle-content {
  border-bottom-right-radius: 0.8rem;
  border-bottom-left-radius: 0.8rem;
  background-color: white;

  justify-content: space-between;
  display: flex;
  padding: 1rem 0.5rem;
}
.totle-content-item {
  width: 33.3%;
  text-align: center;
}

.totle-content-item :first-child {
  font-size: 0.95rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #02b074;
}

.totle-content-item :nth-child(2) {
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 399;
}

.buying {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.8rem;
  background: linear-gradient(-90deg, #0ad272, #02b074);
  border-radius: 0.8rem;
  margin: 1rem 0rem;
  margin: 1rem;
}
.prolifying {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.8rem;
  background: linear-gradient(-90deg, #4bb9fa, #2e72ff);
  border-radius: 0.8rem;
  margin: 1rem;
}
.buying-item {
  display: flex;
  align-items: center;
}
.buying-item > .image-pur {
  width: 1.5rem;
  height: 1.5rem;
}
.buying-item > .image-arrow {
  width: 0.6rem;
  height: 0.6rem;
}
.buy-title {
  font-size: 0.83rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  margin-left: 0.3rem;
}
.prolify {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #ffffff;
}

.productP {
  background-color: #f3f5f7;
  padding: 0.4rem 0rem;
}
.searchPP {
  background-color: white;
  padding: 0.5rem;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.celendar {
  display: flex;
  align-items: center;
  width: 7rem;
  text-align: center;
}

.celendar :nth-child(2) {
  font-size: 0.72rem;
  font-family: PingFang SC;
  /* font-weight: 300; */
  color: #000000;
}

.totle-contents {
  /* border-bottom-right-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem; */
  border-radius: 0.2rem;
  background-color: white;
  justify-content: space-between;
  display: flex;
  padding: 1rem 0.5rem;
  margin: 0rem 1rem 0.5rem 1rem;
}
.totle-contents-item {
  width: 33.3%;
  text-align: center;
}

.totle-contents-item :first-child {
  font-size: 0.85rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #02b074;
}
.totle-contents-item :nth-child(2) {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 300;
}

.allDataC {
  margin: 1rem;
  border-radius: 0.2rem;
  background-color: white;
}

.allDataC-item-title {
  /* display: flex;
    justify-content: space-between; */
  margin: 1rem;
  border-bottom: 1px solid #ebebeb;
}

.allDataC-item-view :first-child {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
}

.allDataC-item-view :nth-child(2) {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #02b074;
}

.contentP {
  display: flex;
  align-items: center;
}

.content-info {
}
.content-info-item {
  padding: 0rem 1rem 0.5rem 1rem;
}
.content-info-item > view {
  color: #9b9b9b;
  font-size: 0.78rem;
  font-family: PingFang SC;
}
.content-info-item span {
  color: black;

  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 400;
}

.proliify {
  width: 5rem;
  text-align: center;
  font-size: 0.95rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ff0000;
  overflow: hidden;
  padding: 0rem 0rem 1rem 0rem;
}

.classesifyP {
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 1rem 1rem 3rem 1rem;
}

.classesify {
  width: 6rem;
  height: 1.8rem;
  border: 1px solid #02af74;

  display: flex;
  align-items: center;
  border-radius: 10px;
}

.classesify-puc {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.classesify-pucs {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.classesify-bus {
  width: 50%;
  font-size: 0.6rem;
}
.classesify-buss {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}



// /* 内联 #18 | http://localhost:8080/#/pages/stati/index */

// /deep/.container[data-v-1dd487dc] {
//   /* height: 10rem; */
//   height: 11rem;
//   position: absolute;
// }

// /* 元素 | http://localhost:8080/#/pages/stati/index */

// /deep/.u-dropdown__content {
//   /* height: 297.883px; */
//   height: 100%;
//   overflow-y: scroll;
// }

// /* 内联 #9 | http://localhost:8080/#/pages/stati/index */

// /deep/.u-dropdown{
//   height: 100%;
// }

// /deep/.u-dropdown__menu{

//   position: ;
// }


// .u-dropdown {
//   position: absolute;
// }


// /deep/ .dropdowns .u-flex {
//   width: 100%;
//   display: flex;
//   justify-content:flex-start
// }

// /deep/ .dropdownss .u-flex {
//   width: 100%;
//   display: flex;
//   justify-content: flex-end;
// }
// .totle-contents {
//  margin-top: 2rem;
// }


</style>